import { getArticleListAPI } from '@/api/home'
import ArticleItem from '@/components/ArticleItem'
import { ArticlesItem } from '@/types/data.d.'
import { InfiniteScroll } from 'antd-mobile'
import { useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
type Props = {
  id: number
}
const ArticleList = ({ id }: Props) => {
  const navigate = useNavigate()
  // 1. 列表数据的变量
  const [data, setData] = useState<ArticlesItem[]>([])
  // 2. 控制列表加载状态 ：true 代表还有数据 | false 没有数据
  const [hasMore, setHasMore] = useState(true)
  // 新闻事件戳变量
  const timestamp = useRef(Date.now())
  /**
   * 3.加载数据方法
   *  1. 组件默认挂载会执行一次，加载一屏的数据，如果不够一屏会再次执行
   *  2. 列表滚动到底部会再次执行
   */
  async function loadMore() {
    // 发送请求获取数据
    const { data } = await getArticleListAPI({
      channel_id: id,
      timestamp: timestamp.current,
    })
    // 向列表中追加数据
    setData((list) => [...list, ...data.results])
    // 判断是否还有数据 =》如果数据设置为 true 可以继续滚动加载数据；没有数据设置为false 不会再继续滚动加载数据
    if (data.pre_timestamp) {
      timestamp.current = data.pre_timestamp
    } else {
      setHasMore(false)
    }
  }
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      {data.map((item) => (
        <div
          className="article-item"
          key={item.art_id}
          onClick={() => navigate('/article/' + item.art_id)}>
          <ArticleItem type={item.cover.type} item={item} />
        </div>
      ))}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList
